<template>
	<view>
		<!-- <u-navbar title="专题课程"></u-navbar> -->
		<view class="u-p-30">
			<externailTitle :title="`专题：${searchName}`"></externailTitle>
			<view v-if="!list || !list.length"  class="empty">暂无数据</view>
			<template v-else>
				<view class="u-flex card-box" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
					<view style="width: 220rpx;">
						<image class="card-box-img" :src="item.imgUrl"
							style="width: 210rpx;height: 130rpx;" mode="aspectFill"></image>
					</view>
					<view class="u-flex-1 u-m-l-15">
						<view class="">
							<view class="card-box-title"><text v-if="item.lessonLable">【{{item.lessonLable}}】</text>{{item.lessonName}}</view>
						</view>
						<view class="u-m-t-20" style="margin-top:20rpx;">
							<view class="card-box-footer " style="display: flex;justify-content: space-between;">
								<view class="u-flex">
									<image v-for="index in 5" :key="index" :src="`../../static/home/star${item.starScore >= index ? '-full' : ''}@2x.png`" style="width: 18rpx;"
										mode="widthFix"></image>
								</view>
								<view>
									<u-icon name="eye-fill" size="24" :label="item.broadcastNumber || 0" label-size="24" label-color="#8C8C8C" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import externailTitle from '../../components/externailTitle/externailTitle.vue';
	export default {
		components:{
			externailTitle,
		},
		data() {
			return {
				yunUrl: 'https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/',
				list: [],
				searchName:'',
				id:''
			}
		},
		onLoad(option) {
			this.searchName = option.name
			this.id = option.id || ''
			this.getLessonListByCondition()
		},
		methods: {
			//获取课程列表
			getLessonListByCondition() {
				let obj = {
					specialId: this.id,
					lessonStatus: 0
				};
				this.$http.getLessonListByCondition(obj).then(res => {
					this.list = res.data.map(item => {
						item.imgUrl = this.yunUrl + item.picture
						return item
					});
				})
			},
			goDetail(data){
				uni.navigateTo({
					url:'../course/detail/detail?id='+ data.lessonId
				})
			},
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.card-box {
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.card-box-img {
		width: 210rpx;
		height: 130rpx;
	}

	.card-box-title {
		color: $default-font-color;
		font-size: 28rpx;
		line-height: 36rpx;
		font-weight: bold;
		max-height: 108rpx;
		overflow: hidden;
		text-overflow: ellipse;
		display:-webkit-box;
	}

	.card-box-account {
		font-size: 22rpx;
		color: #BFBFBF;
	}

	.card-box-footer {
		font-size: 24rpx;
		color: #8C8C8C;
	}

	.empty{
		margin: 40rpx;
		color: #BFBFBF;
		text-align: center;
		font-size: 28rpx;
	}
</style>
